
import React, { useState } from "react";
const ThemeContext = React.createContext();
const { Provider, Consumer } = ThemeContext;


class Child extends React.Component {
  render() {
    console.log(this.context);
    return (
      <Consumer>
        {
          (ctx) => {
            console.log(ctx)
            return (
              <div style={ctx}>
                <h3>我是孩子组件</h3>
              </div>
            )
          }
        }
      </Consumer>

    )
  }
}

function Parent(props) {
  return (
    <div>
      <h3>父组件</h3>
      <Child></Child>
    </div>
  )
}


function DemoA() {
  const [theme, setTheme] = useState({ color: "#000000", background: "#ffffff" })
  let change = (key, e) => {
    setTheme({ ...theme, [key]: e.target.value })
  }
  return (
    <Provider value={theme}>
      <div>
        <div>
          <h2>页面</h2>
          <Parent></Parent>
        </div>
        <div>
          前景色：<input type="color" value={theme.color} onChange={e => change('color', e)} />
          背景色：<input type="color" value={theme.background} onChange={e => change('background', e)} />
        </div>
      </div>
    </Provider>
  )
}


export default DemoA;